iT邦幫忙

DAY 4
0

Flash掰掰!? 不想放棄的囧MD系列 第 4

CSS3 transform來模擬Flash般的動畫(一) - Flash(04)

  • 分享至 

  • xImage
  •  

自從 Flash 不能夠在手持裝置上支援後,

很多人都開始找尋能夠代替能夠在網頁上呈現動畫的方式,

以提升網頁精緻程度 & 吸睛效果,So...後來開始使用 Css3 來達成動畫的效果,

(以下開始是個人解釋也有許誤,請以原廠文件敘述為主唷~XDD)

動畫重點:Transitions、transform、animation

Css3 的動畫效果我大致分成3部分介紹,分別是 Transitions、transform、animation

transform 是當給予 css 參數改變後的物件動畫,

搭配 Transitions 可以決定動畫的過程時間以及動畫曲線

動畫曲線有玩過 Flash 的都應該知道,可以調整速度的漸增or漸減,

Transitions 中還有更多的方式可以使用,後面有機會再說~~XDD

transform 使用方式是給予要作用的型態以及參數,

這對於設計師的我們用起來覺得很不直覺...囧"

但若要在網頁上做,也只能試著去操作它嘍~

小試身手 transform

先說說公式大概是這樣 : transform: 要做的動畫類型(數值);

如果有多個狀態要一起用的話就是:

transform: 要做的動畫類型1(數值)要做的動畫類型2(數值)要做的動畫類型3(數值);

舉例來說,我想要讓一個 .box01 當滑鼠滑入後,做 X 軸移動 60px 同時旋轉60度~

那我在 css 裡面就要寫入:

.box01 { //box的基本設定
  width: 100px;
  height: 100px;
  background: #ee0033;
  margin: 0 auto;
}
.box01:hover { //box滑入後的設定
  transform: translateX(60px) rotate(60deg); //度數單位是deg
}


大概~~就是這樣 XDD

但是現在滑入的話,會發現移動跟旋轉是直接跳到動畫完成的樣子,

中間缺少了補間的效果,那是因為我們還沒加上 Transitions 的參數,

所以我們再把 css 改成:

.box01 { //box的基本設定
  width: 100px;
  height: 100px;
  background: #ee0033;
  margin: 0 auto;
  <span style="color:#0000FF"><strong>transition: 1s; //1秒完成的動畫</strong></span>
}
.box01:hover { //box滑入後的設定
  <span style="color:#0000FF"><strong>transition: 1s; //1秒完成動畫</strong></span>
  transform: translateX(60px) rotate(60deg);
}

接著我們發現只要滑入後,物件就開始會產生補間動畫嘍~~

這邊要稍微提醒下,在 .box01 也要加入 transition

這樣當滑鼠滑出物件的時候,才會也以動畫方式從變形的狀態回復。

今天大概就先講解簡單的 transform 效果,

明天會再稍微深入一些分享其他的動畫型態~~(話說明天要去墾丁阿...囧")


上一篇
元件屬性 - Flash(03)
下一篇
CSS3 transform來模擬Flash般的動畫(二) - Flash(05)
系列文
Flash掰掰!? 不想放棄的囧MD30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言